<template>
	<view v-show="i === index">
		<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
		<mescroll-body top="120" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback"  ref="mescrollUni" @init="mescrollInit" class="app-mescroll">
			<!-- 数据列表 -->
			<view class="app-container">
				<view class="card no-card cu-card dynamic" v-for="(item, idx) in pdList" :key="idx" :index="idx" @tap="toFeedbackDetails(item)">
					<view class="solid-bottom margin-bottom">
						<text class="margin-right-xs text-bold">{{ item.demand_type_describe || item.cloud_print_type_name }}</text>
						<text class="cu-tag line-default radius sm">{{ item.status | filterStatus(index) }}</text>
					</view>
					<view class="gray-bg">
						<view class="text-gray margin-bottom-xs">
							<text class="cuIcon-locationfill margin-right-xs"></text>
							{{ item.shipping_address || item.file_name }}
						</view>
						<view class="text-gray margin-bottom-xs">
							<text class="cuIcon-timefill margin-right-xs"></text>
							{{ item.create_time }}
						</view>
						<view class="text-gray margin-bottom-xs">
							<text class="cuIcon-moneybagfill margin-right-xs"></text>
							￥{{ item.actual_price | filterPrice(item.tip) }}
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>

import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import { getCommunityDemandInfoList } from '@/api/community.js';
import { getCloudPrintHistoryOrderList } from '@/api/order.js';
export default {
	mixins: [MescrollMixin],
	components: {
		MescrollBody
	},
	data() {
		return {
			mescroll: null, //mescroll实例对象
			downOption: {
				auto: false // 不自动加载
			},
			upOption: {
				auto: false, // 不自动加载
				noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: "/static/img/noOrder.png"
				}
			},
			pdList: [], //列表数据
			isInit: false, // 列表是否已经初始化
			scrollY: 0
		};
	},
	props: {
		i: Number, // 每个tab页的专属下标
		index: {
			// 当前tab的下标
			type: Number,
			default() {
				return 0;
			}
		}
	},
	filters: {
		filterStatus(value, index) {
			let orderStates = {};
			if (index === 0) {
				orderStates = { 0: '未支付', 1: '已取消', 2: '未打印', 3: '退款中', 4: '已退款', 5: '售后中', 6: '已完成', 7: '已提交代拿需求' };
			} else {
				orderStates = { 0: '未支付', 1: '等待接单', 2: '已取消', 3: '配送中', 4: '已送达', 5: '申诉中', 6: '退款中', 7: '已退款', 8: '已确认收货', 9: '特殊订单' };
			}
			return orderStates[value];
		},
		filterPrice(value, tip) {
			const total = Number(value) + Number(tip || 0);
			return total.toFixed(2);
		}
	},
	watch: {
		// 监听下标的变化
		index(val) {
			if (this.i === val && !this.isInit) {
				this.isInit = true; // 标记为true
				this.mescroll.triggerDownScroll();
			}
		}
	},
	mounted() {
		// 第一个tab,自动加载数据
		if (this.i === 0) {
			this.isInit = true; // 标记为true
			this.mescroll.triggerDownScroll();
		}
	},
	methods: {
		// mescroll组件初始化的回调,可获取到mescroll对象
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		/*下拉刷新的回调 */
		downCallback(mescroll) {
			mescroll.resetUpScroll();
		},
		/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
		upCallback(mescroll) {
			//联网加载数据
			const { num, size } = mescroll;
			this.getListDataFromNet({
				pageSize: size,
				currentPage: num
			})
				.then(result => {
					const curPageData = result.showing;
					mescroll.endBySize(curPageData.length, result.total);
					if (mescroll.num == 1) this.pdList = []; //如果是第一页需手动制空列表
					this.pdList = this.pdList.concat(curPageData); //追加新数据
					console.log('i=' + this.i + ', mescroll.num=' + mescroll.num + ', mescroll.size=' + mescroll.size + ', curPageData.length=' + curPageData.length);
				})
				.catch(() => {
					// 失败隐藏下拉加载状态
					mescroll.endErr();
				});
		},
		getListDataFromNet({ pageSize, currentPage }) {
			return new Promise((resolve, reject) => {
				const index = this.index;
				if (index === 0) {
					getCloudPrintHistoryOrderList({
						status: [6],
						pageSize: pageSize,
						currentPage: currentPage
					})
						.then(res => {
							resolve(res.result);
						})
						.catch(err => {
							reject(err);
						});
				} else {
					getCommunityDemandInfoList({
						status: [3, 4],
						type: index === 1 ? 2 : 3,
						pageSize: pageSize,
						currentPage: currentPage
					})
						.then(res => {
							resolve(res.result);
						})
						.catch(err => {
							reject(err);
						});
				}
			});
		},
		toFeedbackDetails(item) {
			console.error(item)
			this.$emit('toFeedbackDetails', {
				type: this.index === 0 ? 2 : 3,
				id: this.index === 0 ? item.print_order_id : item.demand_order_id,
			})
		}
	}
};
</script>

<style></style>
